﻿@model AntUnion.FrameWork.Web.Areas.Console.Controllers.WeChatTemplateModel

@{
    ViewData["Title"] = "Create";
    Layout = "~/Areas/Console/Views/Shared/_Layout.cshtml";
}
@section head{
    <style>
        .testPicdiv {
            width: 200px;
            height: 100px;
            overflow: auto;
            border: none;
        }

        .layui-input-disabled {
            background-color: #f2f2f2;
        }

        .scrollbar::-webkit-scrollbar { /*滚动条整体样式*/
            width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        .scrollbar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #009688;
        }

        .scrollbar::-webkit-scrollbar-track { /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

        .layui-form-label {
            width: 180px !important;
        }

        .layui-input {
            width: 100%;
        }

        .layui-input-block {
            margin-left: 180px !important;
        }

        .layui-input-inline {
            width: 30% !important;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
    <script src="~/js/CommonHelper.js"></script>
    <script type="text/javascript">
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'upload', 'laydate'], function () {
            var $ = layui.$
                , form = layui.form
                , admin = layui.admin
                , table = layui.table
                , upload = layui.upload
                , element = layui.element
                , laydate = layui.laydate
                , parentFrameIndex = parent.layer.getFrameIndex(window.name); //获取窗口索引;
            element.init();

             $('.removekeyword').click(function () {
                    i--;
                    $(this).parent().remove()
                });

            /* 监听提交 */
            form.on('submit(updateWechatTemplate)', function (data) {
                var datas = data.field;
                var i = 1;
                var templatedatalist = [];

                //获取模板字段数量
                var templatedatacount = $('#keyword').children('.layui-form-item').length

                for (var i = 0; i <= templatedatacount-1; i++) {
                    var templatedata = new Object();
                    var order_number = '#order_number' + i
                    var order_numbervalue = '#order_numbervalue' + i
                    templatedata.name = $(order_number).val()
                    templatedata.value = $(order_numbervalue).val()
                    console.log(templatedata)
                    templatedatalist.push(templatedata)
                }
                datas["data"] = templatedatalist;
                console.log(datas["data"])
                $.ajax({
                    type: "POST",
                    url: "/Console/SystemConfig/WxMessnagePage",
                    data: datas, // 你的formid
                    async: true,
                    error: function (request) {
                        alert("Connection error");
                    },
                    beforeSend: function (xhr) {
                        layui.layer.load();
                    },
                    success: function (data) {
                        var item = eval(data);
                        if (item.code == 0) {
                            layer.msg("编辑成功", { icon: 1, time: 1000 }, function () {
                                parent.layer.close(parentFrameIndex);
                                parent.layui.table.reload("table-datalist");
                            });
                        } else if (item.code == 1) {
                            layer.msg(item.data, { icon: 2 });
                        } else {
                            layer.msg("保存失败", { icon: 0 });
                        }
                        layer.closeAll('loading');
                    }
                });
                return false;
            });

            var i = 0;

            $('#addkeyword').click(function () {
                var templatedatacount = $('#keyword').children('.layui-form-item').length
                if (templatedatacount != undefined) {
                    i = templatedatacount
                }
                let addhtml;
                addhtml = '<div class="layui-form-item">'
                    + '<label class="layui-form-label">模板字段' + i + '</label>'
                    + '<div class="layui-input-inline">'
                    + '<input type="text" id="order_number' + i + '" name="order_number' + i + '"  maxlength="50" lay-verify="order_number" placeholder="" autocomplete="off" class="layui-input">'
                    + '</div>'
                    + '<div>'
                    + '<label class="layui-form-label">模板字段' + i + '的值</label>'
                    + '<div class="layui-input-inline">'
                    + '<input type="text" id="order_numbervalue' + i + '" name="order_numbervalue' + i + '" value="" maxlength="50" placeholder="" autocomplete="off" class="layui-input">'
                    + '</div>'
                    + '</div>'
                    + '<button type="button" class="layui-btn layui-btn-primary removekeyword">移除</button>'
                    + '</div>'
                $('#keyword').append(addhtml);
                i++;
                $('.removekeyword').click(function () {
                    i--;
                    $(this).parent().remove()
                });
            });
        });
    </script>
}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px; ">
            <form class="layui-form layui-form-pane" action="" lay-filter="component-form-group">
                <div class="layui-form-item">
                    <label class="layui-form-label">跳转链接</label>
                    <div class="layui-input-inline">
                        <input type="text" id="page" name="page" value="@Model.page" maxlength="100" lay-verify="page" placeholder="" autocomplete="off" class="layui-input">
                        @*<input type="hidden" name="id" value="@ViewBag.id" />*@
                        @Html.HiddenFor(x => x.id)
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">消息模板id</label>
                    <div class="layui-input-block">
                        <input type="text" id="template_id" name="template_id" maxlength="300" value="@Model.template_id" lay-verify="template_id" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div id="keyword">
                    @if (Model.data != null)
                    {
                        @foreach (var x in Model.data)
                        {
                            <div class="layui-form-item">
                                <label class="layui-form-label">模板字段@(Model.data.IndexOf(x))</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="order_number@(Model.data.IndexOf(x))" name="order_number@(Model.data.IndexOf(x))" value="@x.name" maxlength="50" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                                <div>
                                    <label class="layui-form-label">模板字段@(Model.data.IndexOf(x))的值</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="order_numbervalue@(Model.data.IndexOf(x))" name="order_numbervalue@(Model.data.IndexOf(x))" value="@x.value" maxlength="50" placeholder="" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <button type="button" class="layui-btn layui-btn-primary removekeyword">移除</button>
                            </div>
                        }
                    }
                </div>
                <button type="button" class="layui-btn" id="addkeyword">添加</button>
                <div class="layui-form-item" style="margin-top:30px;">
                    @*<label style="line-height:36px;"><span style="color:red">*</span>值说明 : orderid=>订单号,date=>时间,man=>配送人,manphone=>配送人电话,doorname=>门店名称,原因=>{reson1:商家取消},mark=>备注,pointphone=>门店电话</label>*@
                </div>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button class="layui-btn" lay-submit="" lay-filter="updateWechatTemplate">立即提交</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>